<!-- 收入统计 -->
<template>
  <div id="Revenue">
    <div id="RevenueEcharts" :style="{height:height,width:width}" />
  </div>
</template>

<script>
export default {
  name: 'Revenue',
  data() {
    return {
      height: '306px',
      width: '100%',
      chart: null
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.initChart() // 构建统计图
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 构建统计图
    initChart() {
      this.chart = this.$echarts.init(document.getElementById('RevenueEcharts'))
      const data = [10, 20, 5, 15, 10, 20, 15, 25, 20, 35, 30, 45]
      const xAxisData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      const yAxisData = []
      const yAxisMax = 50
      const yAxisSplitNumber = 5
      this.chart.setOption({
        color: ['#5fdaac'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          data: xAxisData,
          boundaryGap: false
        },
        yAxis: {
          data: yAxisData,
          type: 'value',
          min: 0,
          max: yAxisMax,
          splitNumber: yAxisSplitNumber,
          axisLabel: {
            formatter: '{value} K'
          }
        },
        series: [
          {
            data: data,
            type: 'line',
            symbol: 'none',
            smooth: 0.6,
            areaStyle: {
              color: '#5fdaac'
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
